<!--
 * @Author: “张矗” “1279074338@qq.com”
 * @Date: 2023-11-09 10:06:17
 * @LastEditors: “张矗” “1279074338@qq.com”
 * @LastEditTime: 2023-11-09 21:11:30
 * @FilePath: \pn\src\views\zhangchu\SearchQuery\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
        <!-- 头部 -->
        <div class="switchover-bigbox">
            <div style="display: flex;justify-content: space-around; margin-top: .3rem;">
                <div @click="$router.go(-1)"><van-icon class-prefix="icon" name="zuojiantou"></van-icon></div>
                <div style="display: flex;">
                    <div>{{ name }}</div>

                    <div style="margin: 0 .3rem 0 .3rem ;">
                        <van-icon class-prefix="icon" name="danxiang"></van-icon>
                    </div>
                    <div>{{ names }}</div>
                </div>
                <div></div>
            </div>
            <div style="display: flex; justify-content: space-between; margin: 0 .3rem 0 .3rem ; font-size:.35rem;">
                <div>前一天</div>
                <div style="width: 50%; text-align: center; color: #000;">
                    <div @click="show = true"
                        style="border: 1px solid #dbdbdb; height: 1rem; border-radius: .3rem; color: #ffffff;">{{ date
                        }}</div>
                    <van-calendar v-model="show" @confirm="onConfirm" color="#00C9E2" />
                </div>
                <div>最后一天</div>
            </div>
        </div>

        <!-- 车票盒子 -->
        <div class="switchover-box">
            <div style="margin-top: .2rem;">
                <van-tabs v-model="activeName" color="#00C9E2">
                    <van-tab title="火车" name="a">
                        <div class="fare-box">
                            <!-- 车票模块 -->
                            <div class="fare-smallbox" v-for="item in TicketData" :key="item.id">
                                <div
                                    style="color:#00C9E2; background-color: #dcfaff; width: 1.2rem; font-size: .3rem; text-align: center; border: 1px  solid #00C9E2; border-radius:0  0 .1rem .1rem ; margin-left: .3rem;">
                                    可后补
                                </div>
                                <div style="display: flex; justify-content: space-between; margin: .2rem .3rem 0 .3rem;">
                                    <div style="font-size: .56rem;">{{ item.departureTime }}</div>
                                    <div style="font-size: .35rem; color: #acacac; border-bottom: 1px solid #acacac;">{{
                                        item.duration }}
                                    </div>
                                    <div style="font-size: .56rem;">{{ item.arrivalTime }}</div>
                                    <div style="font-size: .56rem; color:rgb(255, 165, 69);">￥{{ item.price }}</div>
                                </div>
                                <div
                                    style="display: flex; justify-content:space-between; margin: .15rem .3rem 0 .3rem; color: #8b8b8b; ">
                                    <div>{{ name }}</div>
                                    <div>{{ item.trainNumber }}</div>
                                    <div>{{ names }}</div>
                                    <div></div>
                                    <div></div>
                                </div>
                                <div style="display: flex; justify-content: space-between; margin: .2rem .3rem 0 .3rem;">
                                    <div style="display: flex; font-size: .3rem;">{{ item.seatType1 }}<div
                                            style="color:rgb(255, 165, 69);">
                                            （抢）</div>
                                    </div>
                                    <div style="display: flex; font-size: .3rem;">{{ item.seatType2 }}<div
                                            style="color:rgb(255, 165, 69);">
                                            （抢）</div>
                                    </div>
                                    <div style="display: flex; font-size: .3rem;">{{ item.seatType3 }}<div
                                            style="color:rgb(255, 165, 69);">
                                            （抢）</div>
                                    </div>
                                    <div style="font-size: .3rem;">{{ item.seatType4 }}</div>
                                </div>

                            </div>

                        </div>
                        <!-- 底部导航 -->
                        <div class="fares-box">
                            <div v-for="item in BottomNavigation" :key="item.id" :style="{ color: item.color }"
                                @click="changeColor(item)">{{ item.name }}</div>
                        </div>
                    </van-tab>

                    <van-tab title="中转" name="b">
                        <div class="fare-box">
                            <div class="fare-smallbox" style="height:5rem ;" v-for="item in interchangeStation"
                                :key="item.id">
                                <div style="display: flex; justify-content: space-between; margin: .3rem  .3rem 0 .3rem;">
                                    <div style="font-size: .5rem;">{{ item.departureTime }}</div>
                                    <div style="font-size: .3rem; color: #b7b7b7;">全程{{ item.wholeJourney }}</div>
                                    <div style="font-size: .5rem;">{{ item.arrivalTime }}</div>
                                    <div></div>
                                    <div style="font-size: .6rem; color:rgb(255, 165, 69);">￥{{ item.price }}</div>
                                </div>
                                <div style="display: flex; justify-content: space-between;">
                                    <div style="width: 70%;">
                                        <van-steps :active="active">
                                            <van-step><van-icon class-prefix="icon"
                                                    name="huochetubiao"></van-icon></van-step>
                                            <van-step>{{ item.interchangeStation }}</van-step>
                                            <van-step><van-icon class-prefix="icon"
                                                    name="huochetubiao"></van-icon></van-step>
                                        </van-steps>
                                    </div>

                                </div>
                                <div style="display: flex;justify-content: space-between; ">
                                    <div style="font-size: .3rem; margin-left: .3rem;">{{ name }}</div>
                                    <div style="font-size: .3rem; color:#8b8b8b;">{{ item.transferTime }}</div>
                                    <div style="font-size: .3rem;">{{ names }}</div>
                                    <div></div>
                                    <div></div>
                                </div>
                                <div style="display: flex; justify-content:space-between; margin-top:.3rem; ">
                                    <div
                                        style="width: .3rem; height: .3rem; border-radius: 50%; border: 1px solid #00C9E2; text-align: center; font-size: .3rem; color:#00C9E2; margin-left: .3rem ">
                                        1</div>
                                    <div style="font-size: .3rem;color:#8b8b8b;">{{ item.seatType1 }}</div>
                                    <div style="font-size: .3rem;color:#8b8b8b;display: flex;">{{ item.seatType2 }} <div
                                            style="color:rgb(255, 165, 69);">{{
                                                item.seatType2num }}</div>
                                    </div>
                                    <div style="font-size: .3rem;color:#8b8b8b; display: flex;">{{ item.seatType3 }} <div
                                            style="color:rgb(255, 165, 69);">{{
                                                item.seatType3num }}</div>
                                    </div>
                                    <div></div>
                                    <div></div>
                                </div>
                                <div style="display: flex; justify-content:space-between; margin-top:.3rem ;">
                                    <div
                                        style="width: .3rem; height: .3rem; border-radius: 50%; border: 1px solid #00C9E2; text-align: center; font-size: .3rem; color:#00C9E2; margin-left: .3rem">
                                        2</div>
                                    <div style="font-size: .3rem;color:#8b8b8b;">{{ item.seatType4 }}</div>
                                    <div style="font-size: .3rem;color:#8b8b8b; display: flex;">{{ item.seatType5 }}
                                        <div>{{
                                            item.seatType5num }}</div>
                                    </div>
                                    <div style="font-size: .3rem;color:#8b8b8b; display: flex;">{{ item.seatType6 }} <div
                                            style="color:rgb(255, 165, 69);">{{
                                                item.seatType6num }}</div>
                                    </div>
                                    <div></div>
                                    <div></div>
                                </div>

                            </div>

                        </div>
                        <!-- 底部导航 -->
                        <div class="fares-box">
                            <div v-for="item in BottomNavigations" :key="item.id" :style="{ color: item.color }"
                                @click="changeColor(item)">{{ item.name }}</div>
                        </div>
                    </van-tab>
                </van-tabs>
            </div>
        </div>

    </div>
</template>

<script>
import { MyTicketDatas, MyinterchangeStation, MyBottomNavigation, MyBottomNavigations } from '../../../api/zhangchu/zhangchuAPI/SearchQuery';

export default {
    data() {
        return {
            name: '',
            names: '',

            date: '选择日期',
            show: false,
            selectedItem: null,
            activeName: "",
            TicketData: [],
            interchangeStation: [],
            BottomNavigation: [],
            BottomNavigations: [],
        }
    },

    methods: {
        async TicketDatasAPI() {
            let { data } = await MyTicketDatas()
            console.log(data)
            this.TicketData = data
        },
        async interchangeStationAPI() {
            let { data } = await MyinterchangeStation()
            console.log(data)
            this.interchangeStation = data
        },
        async BottomNavigationAPI() {
            let { data } = await MyBottomNavigation()
            console.log(data)
            this.BottomNavigation = data
        },
        async BottomNavigationsAPI() {
            let { data } = await MyBottomNavigations()
            console.log(data)
            this.BottomNavigations = data
        },



        formatDate(date) {
            return `${date.getMonth() + 1}/${date.getDate()}`;
        },
        onConfirm(date) {
            this.show = false;
            this.date = this.formatDate(date);
        },
        changeColor(item) {
            // 更新当前选中的元素
            if (this.selectedItem) {
                this.selectedItem.color = '#000000';
            }
            item.color = '#00C9E2';
            this.selectedItem = item;
        }
    },

    created() {
        this.name = sessionStorage.getItem("name") || "北京"
        this.names = sessionStorage.getItem("names") || "上海"
        this.TicketDatasAPI();
        this.interchangeStationAPI();
        this.BottomNavigationAPI();
        this.BottomNavigationsAPI();

    },
}

</script>

<style scoped>
.switchover-bigbox {
    height: 3rem;
    background-color: #00C9E2;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    line-height: 1rem;
    font-size: .5rem;
    position: relative;

}

.switchover-box {
    width: 100%;
    border-radius: .3rem .3rem 0 0;
    background-color: rgb(255, 255, 255);
    position: absolute;
    top: 2.8rem;
}


.fare-box {
    width: 100%;
    height: 14rem;
    display: flex;
    flex-direction: column;
    background-color: rgb(233, 233, 233);

}

.fare-smallbox {
    height: 3rem;
    background-color: rgb(255, 255, 255);
    border-radius: .3rem;
    margin: .3rem;
    display: flex;
    flex-direction: column;
    font-size: .35rem;
}

.fares-box {
    display: flex;
    justify-content: space-around;
    margin: .3rem;
    background-color: #ffffff;
    height: 1.5rem;
    line-height: 1.5rem;
    border-radius: 1rem;
    font-size: .35rem;
    position: sticky;
    bottom: .5rem;
    box-shadow: 2px 2px 5px #888;
}
</style>